import './style.less';

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';

import { Button } from 'antd';
import { DIST } from 'conf';
import { Link } from 'react-router';

@inject(['user']) @observer
export default class Index extends Component {

    state = {
        time: 5
    }

    componentDidMount() {
        this.props.user.getUser();

        this.setinter = setInterval(() => {
            let { time } = this.state;
            time--;
            if (time > 0) {
                this.setState({ time });
            } else {
                clearInterval(this.setinter);
            }
        }, 1000);
    }

    componentWillUnmount() {
        clearInterval(this.setinter);
    }

    render() {
        let { data } = this.props.user;
        let { time } = this.state;
        return (
            <div className="index">
                <h1>mobx案例</h1>
                <Button type="primary">{data ? data.username : <span>倒计时：{time}</span>}</Button>
                <Link to={DIST + '/ui'}>UI风格</Link>
            </div>
        );
    }
}